<template>
  <el-form ref="areaform" :model="params" :rules="rules" label-width="80px" class="common__form">
    <el-form-item label="机构类型" prop="type">
      <el-select class="common__input" v-model="params.type" clearable placeholder="请选择机构类型">
        <el-option v-for="item in organizeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item v-if="isAgency" label="机构名称" prop="agencyName">
      <el-input class="common__input" clearable v-model="params.agencyName" placeholder="请输入机构名称" />
    </el-form-item>
    <el-form-item v-if="!!details || isCreate" label="所属区域" prop="areaId">
      <!-- change-on-select -->
      <el-cascader class="common__input" @change="handleChangeArea(true)" change-on-select clearable placeholder="请选择所属区域" expand-trigger="click" :options="areaCascadeOptions" v-model="params.areaId" />
    </el-form-item>
    <el-form-item v-if="isSchool" label="学校名称" prop="schoolId">
      <el-select class="common__input" v-model="params.schoolId" clearable placeholder="请选择学校名称">
        <el-option v-for="item in schoolsOptions" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="推荐" prop="recommend" v-if="!!details || isCreate">
      <el-radio v-model="params.recommend" label="1">是</el-radio>
      <el-radio v-model="params.recommend" label="0">否</el-radio>
    </el-form-item>
    <el-form-item v-if="isSchool" label="标签" prop="tagIds">
      <el-tag class="organize__tag" v-for="(tag, index) in params.tagIds" :key="index" closable @close="handleDeleteTag(index)">
        {{tag && tag.paramKey}}
      </el-tag>
      <div>
        <el-select size="small" class="organize__labbels" @change="handleChangeUniversityLabel" v-model="tagId" clearable placeholder="请选择标签">
          <el-option v-for="item in universityLabelOptions" :key="item.paramValue" :label="item.paramKey" :value="item.paramValue" />
        </el-select>
      </div>
    </el-form-item>
    <p v-if=" isSchool" class="form__remarks">注：如没找到目标学校，请去学校列表添加</p>
    <el-form-item v-if="isAgency" label="机构简介" prop="description">
      <el-input class="common__input" type="textarea" :autosize="{ minRows: 2, maxRows: 6}" placeholder="请输入机构简介" v-model="params.description" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" :loading="isSaveLoading" @click="submitForm">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { rules, params, transOptionsItem, isAgency } from './options.js'

export default {
  name: 'OrganizeForm',
  data() {
    return {
      rules,
      isSaveLoading: false,
      params: { ...params },
      isCreate: false,
      tagId: ''
    }
  },

  props: {
    details: {},
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    details(details) {
      this.params = { ...this.params, ...details }
      this.handleChangeArea()
      this.transTagIds(details)
    }
  },

  created() { },

  computed: {
    isAgency() {
      return (!!this.details || this.isCreate) && isAgency(this.params.type)
    },
    isSchool() {
      return (!!this.details || this.isCreate) && !isAgency(this.params.type)
    },
    ...mapGetters(['areaCascadeOptions', 'organizeTypeOptions', 'schoolsOptions', 'universityLabelOptions'])
  },

  methods: {
    // 映射 Actions
    ...mapActions(['GetSchoolsOptions']),

    // 标签数组 ID 转化
    // [1, 2, 3] => [ { key: 1, label: '标签' } ]
    transTagIds(details) {
      const { tagIds = [] } = details
      const length = tagIds.length
      const result = []
      let index = -1
      while (index++ < length) {
        this.universityLabelOptions.forEach(item => {
          if (Number(item.id) === tagIds[index]) result.push(item)
        })
      }
      this.params.tagIds = result
    },

    handleChangeUniversityLabel(label) {
      const tag = this.universityLabelOptions.filter(({ id }) => Number(label) === id)[0]
      if (!this.params.tagIds.includes(tag) && tag && tag.id) {
        this.params.tagIds.push(tag)
      }
    },

    // 删除标签
    handleDeleteTag(index) {
      this.params.tagIds.splice(index, 1)
    },

    // 获取学校 Optios
    handleChangeArea(init) {
      const { areaId } = this.params
      this.params.areaId = areaId.filter(item => item)
      if (init) this.params.schoolId = ''
      if (areaId && areaId.length && this.isSchool) {
        this.GetSchoolsOptions(areaId[2] || areaId[1] || areaId[0])
      }
    },

    // 表单验证
    submitForm() {
      this.$refs['areaform'].validate((valid) => {
        if (valid) {
          if (this.isCreate || this.isEdit) this.emitFormParams()
          this.isCreate = true
        } else {
          return false
        }
      })
    },

    // 表单重置
    resetForm() {
      this.$refs['areaform'].resetFields()
    },

    // emit && 参数处理
    emitFormParams() {
      const { type, areaId = [], schoolId, agencyName, tagIds } = this.params
      const { label = '' } = transOptionsItem(this.schoolsOptions, ({ value }) => schoolId === value)
      const params = {
        ...this.params,
        areaId: areaId.slice(-1)[0] || '',
        schoolName: label,
        agencyName: isAgency(type) ? agencyName : label,
        tagIds: tagIds.map(({ id }) => id)
      }
      this.initParams()
      this.resetForm()
      this.$emit('save', params)
    },

    initParams() {
      const { type, tagIds } = this.params
      tagIds.splice(0, tagIds.length)
      this.params = { ...params, type, tagIds }
      this.tagId = ''
    }
  }
}
</script>

<style lang="scss" scoped>
.common__form {
  margin: 40px auto 0;
  width: 600px;
  .common__input {
    width: 454px;
  }
  .form__remarks {
    padding: 0 0 30px 110px;
    font-size: 12px;
    color: #333;
  }
  .organize__tag {
    margin: 0 10px 10px 0;
  }
  .organize__labbels {
    // margin: 20px 0;
  }
}
</style>


